import { useState,useEffect } from 'react';
import { Layout, Carousel, Tabs, Table, Row, Col, Divider, Button } from 'antd';
import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
import './home.less';
import _API from './api';
import a from './public/a.png';
import b from './public/b.png';
import c from './public/c.png';
import d from './public/d.png';
import logo from './public/logo.jpg';
import { columns1, data1, columns2, data2 } from './public/tablist';
import HeaderPage from '@/components/HeaderPage';

const { Header, Footer, Sider, Content } = Layout;
const { TabPane } = Tabs;
// const [successful_record] = useState([
//   '救助落水儿童成功',
//   '救助落水少年成功',
//   '救助落水青年成功',
//   '救助落水中年成功',
//   '救助落水老年成功',

// ])

export default function HomePage() {
  useEffect(() => {
    getUser();
    console.log('挂载|数据更新后');
    return () => {
      console.log('销毁|数据更新前');
    };
  });

  const getUser = async () => {
    const result = await _API.user();
    console.log(result, 'result');
  };
  return (
    <div className="home_page">
      <HeaderPage></HeaderPage>
      {/* <h1>Home - Page</h1> */}
      <Layout>
        <Layout width="100vw">
          <Content width="60vw" style={{ width: '60vw', overflow: 'hidden' }}>
            <div style={{ padding: '0vw', marginBottom: '2vw' }}>
              <Carousel autoplay>
                <img src={a} alt="" />
                <img src={b} alt="" />
                <img src={c} alt="" />
                <img src={d} alt="" />
              </Carousel>
            </div>
            <div>
              <Tabs defaultActiveKey="2" style={{ padding: '0 2vw 0' }}>
                <TabPane
                  tab={
                    <span>
                      <AppleOutlined />
                      长期&amp;物资求助
                    </span>
                  }
                  key="1"
                >
                  <Table columns={columns1} dataSource={data1} />
                </TabPane>
                <TabPane
                  tab={
                    <span>
                      <AndroidOutlined />
                      当地紧急求助
                    </span>
                  }
                  key="2"
                >
                  <Table columns={columns2} dataSource={data2} />
                </TabPane>
              </Tabs>
            </div>
          </Content>
          <Sider
            width="30vw"
            style={{
              backgroundColor: '#f0f2f5',
              width: '30vw',
              overflow: 'hidden',
            }}
          >
            <Row gutter={16} className="weather" style={{
              marginLeft: '7px',
              marginTop: '15px',
              marginRight: '2px'
            }}>
              <Col className="gutter-row" span={12}>
                <div  style={{
                  padding:'10px'
            }} >可能出现当地的自然灾害</div>
              </Col>
              <Col className="gutter-row" span={12}>
                <div>当地天气情况</div>
              </Col>
            </Row>
            <Button danger className='dangerhelp'>紧急求助</Button>
            <div className='relief_way'>
              <div className='relief_title'>求助 & 网站使用指南</div>

              <Row gutter={16} style={{
                marginLeft: '7px',
                marginTop: '15px',
                marginRight: '2px'
              }}>
                <Col className="gutter-row" span={12}>
                  <Button type="primary" className='relief_button'>求助步骤一览</Button>
                </Col>
                <Col className="gutter-row" span={12}>
                  <Button type="primary" className='relief_button'>捐款绿色通道</Button>
                </Col>
              </Row>
              <Row gutter={16} style={{
                marginLeft: '7px',
                marginTop: '15px',
                marginRight: '2px'
              }}>
                <Col className="gutter-row" span={12}>
                  <Button type="primary" className='relief_button'>志愿者绿色通道</Button>
                </Col>
                <Col className="gutter-row" span={12}>
                  <Button type="primary" className='relief_button'>脱险技巧分享</Button>
                </Col>
              </Row>
              <Row gutter={16} style={{
                marginLeft: '7px',
                marginTop: '15px',
                marginRight: '2px'
              }}>
                <Col className="gutter-row" span={12}>
                  <Button type="primary" className='relief_button'>安全课程</Button>
                </Col>
                <Col className="gutter-row" span={12}>
                  <Button type="primary" className='relief_button'>点击更多</Button>
                </Col>
              </Row>
            </div>

            <div className='successful_save'>
              <div>成功获救一览 <span>查看详情>></span> </div>

            </div>
          </Sider>
        </Layout>
        <Footer
          style={{
            background: '#bdc3c7',
            background:
              '-webkit-linear-gradient(to right, rgb(189, 195, 199), rgb(44, 62, 80))',
            background:
              'linear-gradient(to right, rgb(189, 195, 199), rgb(44, 62, 80))',
          }}
        >
          青训营第二届: 我们就是队 ----- 自然灾害信息共享平台
        </Footer>
      </Layout>
    </div>
  );
}
